<!--
3D转换
    - 特点
        近大远小
        物体后面被遮挡，不可见
    - 三维坐标系（立体空间）
        x轴  水平往右，正右负左
        y轴  垂直往下，正下负上
        z轴  垂直屏幕，正外负里
    - 主要内容（其它的自己拓展学习）
        3D位移  translate3D(x,y,z)  也叫作：平移、偏移、移动
        3D旋转  rotate3D(x,y,z)
        透视    perspective
        3D呈现  transfrom-style

3D转换之：位移
    单独分开
        transform: translateX(x);       // x、y与2D是一样，3D只是在2D基础上多出z
        transform: translateY(y);
        transform: translateZ(z);       // z轴，一般用px的精确值，很少用百分比
    复合写法
        transform: translate3d(x,y,z);  // 三个必填，不能省略
        transform: translateX(100px) translateY(100px) translateZ(100px);
-->
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  div {
    width: 200px;
    height: 200px;
    background-color: purple;
    /* 以下两句是一样的 */
    /* transform: translateX(100px) translateY(100px) translateZ(100px); */
    transform: translate3d(100px, 100px, 100px);

    /* 这是错误写法，xyz不能省略任何一个，不设置的话写0就好 */
    /* transform: translate3d(100px); */
  }
</style>

<div></div>
